<template>
	<view>
		<!-- 确认订单 -->
		<view class="bg-white px-2">
			<!-- 步骤条 -->
			<view class="w-100 mb-2 flex justify-center">
				<uni-steps class="mt-2 w-100 mb-2" :active-color="color" :options="list1" :active="active" />
			</view>
			<!-- 提货人 -->
			<view class="px-2">
				<Navtitle title="提货人"></Navtitle>
				<view class="my-3 flex font-sm justify-between"
					style="border: 2rpx solid rgb(221,221,211);">
					<view class="flex flex-column align-center w-100" style="height: 300rpx;justify-content: space-around;">
						<view class="flex align-center">
							<text>提货人:</text>
							<view style="border-radius: 15rpx;" class="ml-2 flex align-center px-2" :class="'border-'+color">
								<input type="text" placeholder="请输入提货人" v-model="SalesOrder[0].Sales_Contacts">
							</view>
						</view>
						<view class="flex align-center">
							<text>手机号:</text>
							<view style="border-radius: 15rpx;" class="ml-2 flex align-center px-2" :class="'border-'+color">
								<input :maxlength="11" type="text" placeholder="请输入手机号" v-model="SalesOrder[0].Sales_Phone">
							</view>
						</view>
						<view class="flex align-center">
							<text class="mr-2">地址:</text>
							<uni-data-picker @change="changess" v-model="address"
								style="width: 400rpx;" placeholder="请选择地址" popup-title="请选择城市"
								:localdata="Address" orderby="value asc"></uni-data-picker>
						</view>
						<view class="flex align-center">
							<text class="mr-2">详细地址:</text>
							<view style="border-radius: 15rpx;width: 320rpx;" class="flex align-center px-2" :class="'border-'+color">
								<input type="text" placeholder="请输入详细地址" v-model="AddressDetail">
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单明细 -->
			<view class="px-2">
				<Navtitle title="订单明细"></Navtitle>
				<view class="mt-2 flex flex-column" style="border: 2rpx solid rgb(221,221,211);">
					<view class="w-100 flex font-sm font-weight-bold"
						style="background-color: rgb(249,250,252);height: 70rpx;">
						<view class="flex-1 text-center"
							style="line-height: 70rpx;border-right:2rpx solid rgb(221,221,211);">
							<text>货物信息</text>
						</view>
						<view class=" text-center"
							style="width: 15%;line-height: 70rpx;border-right:2rpx solid rgb(221,221,211);">
							<text>单价</text>
						</view>
						<view class=" text-center"
							style="width: 15%;line-height: 70rpx;border-right:2rpx solid rgb(221,221,211);">
							<text>下单数量</text>
						</view>
						<view class=" text-center" style="width: 15%;line-height: 70rpx;">
							<text>金额</text>
						</view>
					</view>
					<view class="flex" style="border-bottom:2rpx solid rgb(221,221,211);height: 150rpx;">
						<view class="flex-1 flex ml-8 align-center"
							style="line-height: 70rpx;border-right:2rpx solid rgb(221,221,211);">
							<image style="width: 100rpx;" :src="Domain_IMG+SalesOrder[0].Picture_URL" mode="widthFix">
							</image>
							<text>{{SalesOrder[0].Article_Name}}</text>
						</view>
						<view class="flex align-center justify-center"
							style="width: 15%;line-height: 70rpx;border-right:2rpx solid rgb(221,221,211);">
							<view class="flex justify-center">
								<text :class="'text-'+color">￥{{SalesOrder[0].Sales_Unit_Price}}</text>
							</view>
						</view>
						<view class="flex align-center justify-center"
							style="width: 15%;line-height: 70rpx;border-right:2rpx solid rgb(221,221,211);">
							<text :class="'text-'+color">{{SalesOrder[0].quantity}}</text>
						</view>
						<view class="flex align-center justify-center" style="width: 15%;line-height: 70rpx;">
							<text :class="'text-'+color">￥{{SalesOrder[0].Sales_Unit_Price*SalesOrder[0].quantity}}</text>
						</view>
					</view>
				</view>
				<view class="flex my-2 font-sm align-center">
					<text class="mr-2">给卖家留言:</text>
					<view class="px-2 py-1" style="border: 2rpx solid rgb(221,221,211);width: 70%;">
						<input v-model="SalesOrder[0].Sales_Message" placeholder-class="font-sm" placeholder-style="color: #aaa;"
							placeholder="给卖家留言,可以告诉卖家您的特殊要求.需先和卖家协商一致" type="text">
					</view>
				</view>
			</view>
			<!-- 发票 -->
			<view class="px-2">
				<Navtitle title="发票"></Navtitle>
				<view class="my-3" style="border: 2rpx solid rgb(221,221,211);">
					<view class="flex flex-column  mt-4 ml-8">
						<view class="flex mb-2">
							<text class="mr-3">开具发票:</text>
							<radio-group class="flex">
								<label v-for="(item, index) in checkData" :key="index">
									<view class="flex align-center mr-2" @click="changed(item.name)">
										<view>
											<radio :color="color" :checked="item.check" />
										</view>
										<view>
											<text>{{item.name}}</text>
										</view>
									</view>
								</label>
							</radio-group>
						</view>
						<view v-show="show" class="" style="width: 80%;">
							<uni-forms ref="baseForm" :modelValue="baseFormData">
								<uni-forms-item label="发票类型" required label-width="100">
									<uni-easyinput v-model="baseFormData.name" placeholder="请输入发票类型" />
								</uni-forms-item>
								<uni-forms-item label="发票抬头" required label-width="100">
									<uni-easyinput v-model="baseFormData.age" placeholder="请输入发票抬头" />
								</uni-forms-item>
								<uni-forms-item label="联系电话" required label-width="100">
									<uni-easyinput v-model="baseFormData.age" placeholder="请输入联系电话" />
								</uni-forms-item>
								<uni-forms-item label="电子邮箱" label-width="100">
									<uni-easyinput v-model="baseFormData.age" placeholder="请输入电子邮箱" />
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
				</view>
			</view>
			<!-- 协议条款 -->
			<view class="px-2 pb-4">
				<Navtitle title="协议条款"></Navtitle>
				<view class="mt-2">
					<checkbox-group @change="checkboxChange">
						<label>
							<checkbox :color="color" value="勾选" :checked="checked" />下单即代表您同意
							<text :class="'text-'+color">《买家承诺函》</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view style="height: 240rpx;">
		
		</view>
		<!-- 底部支付 -->
		<view class=" bg-white fixed-bottom w-100" style="height: 200rpx;">
			<view class="flex justify-center">
				<view class="flex flex-column align-center">
					<view class="flex align-center mt-2">
						<text>应付金额</text>
						<text class="font-lg font-weight-bold ml-2" :class="'text-'+color">￥{{SalesOrder[0].Sales_Unit_Price*SalesOrder[0].quantity}}</text>
					</view>
					<view @click="payfor()" :class="'bg-'+color" class="btn mt-2 text-white py-2 px-3 text-center font-sm" style="width: 100rpx;">
						<text>提交订单</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		data222
	} from '@/static/js/data.js'
	const {
		Address
	} = data222();
	const app = getApp()
	export default {
		data() {
			return {
				color: uni.getStorageSync('ThemeColors') ? uni.getStorageSync('ThemeColors') : 'green',
				Address:Address(),
				AddressDetail:'',
				address:'',
				Domain_IMG: app.globalData.Domain_IMG,
				active: 0,
				show: false,
				checked: false,
				LetterCommitment: false,
				name:'[请登录]',
				// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},
				SalesOrder: [{
					Article_Name: '',
					Article_SerialNumber: '',
					Article_Specifications_SerialNumber: '',
					Picture_URL: '',
					Sales_Contacts: '',
					Sales_Phone: '',
					Sales_Address: '',
					Sales_Message: '',
					Sales_Unit_Price: '',
					Sales_Unit_Price_Stock_SerialNumber: '',
					Specifications_Name: '',
					Store_SerialNumber: '',
					Unit_Price: '',
					quantity: '',
					specifications: ''
				}],
				list1: [{
					title: '①确认订单'
				}, {
					title: '②在线付款'
				}],
				checkData: [{
					check: true,
					name: "不开发票"
				}, {
					check: false,
					name: "个人"
				}]
			};
		},
		onLoad(e) {
			this.SalesOrder = JSON.parse(decodeURIComponent(e.SalesOrder))
			this.SalesOrder[0].Sales_Contacts = uni.getStorageSync('username')
			this.SalesOrder[0].Sales_Phone = uni.getStorageSync('use')
		},
		methods:{
			changed(name) {
				console.log(name)
				if (name == '个人') {
					this.show = true
				} else {
					this.show = false
				}
			},
			changess(e, i) {
				if (e.detail.value.length > 0) {
					this.address = e.detail.value[0].text + '/' + e.detail.value[1].text + '/' + e
						.detail.value[2].text
				}
			},
			payfor() {
				const reg = /^1[3-9]\d{9}$/
				if (!reg.test(this.SalesOrder[0].Sales_Phone)) {
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				if (this.address == '') {
					uni.showToast({
						title:'请选择地址',
						icon:'none'
					})
					return
				}
				if (this.AddressDetail == '') {
					uni.showToast({
						title:'请填写详细地址',
						icon:'none'
					})
					return
				}
				if (!this.checked) {
					uni.showToast({
						title:'请勾选买家承诺函',
						icon:'none'
					})
					return
				}
				this.SalesOrder[0].Sales_Address = this.address+'/'+this.AddressDetail
				uni.navigateTo({
					url: `/pages/index/GoodsPay?SalesOrder=${encodeURIComponent(JSON.stringify(this.SalesOrder))}`
				})
			},
			shows(e) {
				console.log(e)
			},
			checkboxChange(e) {
				console.log(e)
				if (e.detail.value[0] == '勾选') {
					this.checked = true
				} else {
					this.checked = false
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
